// 导入：类型、接口、模块、组件、样式
import { Component } from "react";

// import Todos from "./pages/todos";

import ClassState from "./study/01-类组件状态"; // pages/index.tsx   pages/index/index.tsx
import FunState from "./study/02-函数组件状态";
import ClassSync from "./study/05-setState异步同步18版本";
import ClassMerge from "./study/07-setState合并";
import Attr from "./study/08-组件属性";
import MergeEvent from "./study/09-合成事件";
import MergeEvent2 from "./study/10-合成事件传参";
import Map from "./study/12-列表循环";
import Form1 from "./study/13-受控组件";
import Form2 from "./study/14-受控组件封装";
import Children from "./study/15-父传子children";
import Context from "./study/17-Context";
import Fetch from "./study/18-跨域";
import Life1 from "./study/19-生命周期：挂载";
import Life2 from "./study/20-生命周期：更新";
import Son from "./study/21-生命周期：卸载";
import Xnyh from "./study/22-生命周期：性能优化";
import Ali from "./study/24-阿里面试题";
import FatherGetData from "./study/25-父操作子";

import FunDefine from "./study2/01-函数组件定义";
import FunStateEvent from "./study2/02-函数组件状态和事件";
import FunAttr from "./study2/03-函数组件属性";
import FunForm from "./study2/04-函数组件受控组件";
import FunLife from "./study2/05-函数组件生命周期";
import Protal from "./study2/06-portal";
import Ref1 from "./study2/07-父操作子铺垫：操作DOM";
import Ref2 from "./study2/08-父操作子";
import Memo from "./study2/09-memo";
import Memo2 from "./study2/10-memo留心";
import UseCallback from "./study2/11-useCallback";
import UseMemo from "./study2/12-useMemo";

import ReactRouter from "./router";

import "./styles/reset.scss";

class Index extends Component {
  render() {
    // 模拟路由
    const path = window.location.href.split("/").pop();
    // 返回数据
    return (
      <>
        <ReactRouter />

        {/* ========================= */}
        {/* ========================= */}
        {/* ========================= */}
        {/* ========================= */}
        {/* ========================= */}
        {/* ========================= */}

        {/* {path === "" && <Home />} */}
        {path === "funAttr" && (
          <FunAttr a="1" b={2} c={[11, 2, 3]} d={{ a: 1, b: "dsafsaf" }} />
        )}
        {path === "protal" && <Protal />}
        {path === "useMemo" && <UseMemo />}
        {path === "useCallback" && <UseCallback />}
        {path === "memo" && <Memo />}
        {path === "memo2" && <Memo2 />}
        {path === "ref1" && <Ref1 />}
        {path === "ref2" && <Ref2 />}
        {path === "fatherGetData" && <FatherGetData />}
        {/* {path === "login" && <Login />} */}
        {/* {path === "todos" && <Todos />} */}
        {path === "funForm" && <FunForm />}
        {path === "funLife" && <FunLife />}
        {path === "classState" && <ClassState />}
        {path === "funState" && <FunState />}
        {path === "classSync" && <ClassSync />}
        {path === "classMerge" && <ClassMerge />}
        {path === "attr" && <Attr a="1" b={2} />}
        {path === "mergeEvent" && <MergeEvent />}
        {path === "mergeEvent2" && <MergeEvent2 />}
        {path === "map" && <Map />}
        {path === "form1" && <Form1 />}
        {path === "form2" && <Form2 />}
        {path === "context" && <Context />}
        {path === "fetch" && <Fetch />}
        {path === "life1" && <Life1 />}
        {path === "life2" && <Life2 />}
        {path === "son" && <Son />}
        {path === "xnyh" && <Xnyh />}
        {path === "ali" && <Ali />}
        {path === "funDefine" && <FunDefine />}
        {path === "funStateEvent" && <FunStateEvent />}
        {path === "children" && (
          <Children a="1" b={2} c={<h1>文字🐂🍺</h1>}>
            <b>双标签中的内容</b>
          </Children>
        )}
      </>
    );
  }
}
export default Index;
